<template>
		<div class="app-container">
			<el-row :gutter="20">
			  <el-col :span="6" v-for="(title,index) in titles" :key="index" >
					<el-card class="box-card" :style="itemStyle(index)">
						{{title}}
            <el-tooltip content="该数据统计范围为系统上线至今合计结果" placement="bottom" effect="light">
              <i class="el-icon-info" style="font-size: small;float: right;"></i>
            </el-tooltip>
						<br />
						<div v-for="(vo,index) in vos" :key="index">
						<span v-if="vo.type == title">{{vo.total}}</span>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>
</template>

<script>

	import axios from 'axios'

	export default {
		data() {
			return {
				vos:[],
				titles:[
					"日常检验",
					"稳考",
					"水",
					"环境监测"
				]
			}
		},
		created() {

		},
		mounted() {
			// const headers = {
			//   'SourceSystem':'OA',
			//   'TargetSystem':'QMS',
			//   'ServiceName':'S001008002A',
			//   'PathString':'/dataView/itemsTotal'
			// }
			// axios.get('/v1.0/qmspath/goThroughApi', {headers}).then(res=>{
			// 	this.vos = res.data.vos;
			// })
		},
		methods:{

			itemStyle(i){
				if (i == 0){
					return "font-size: 2.5rem;text-align: center;background-image: linear-gradient(160deg, #ADD9F6 20%,#84C2CA 80%);"
				}else if(i == 1){
					return "font-size: 2.5rem;text-align: center;background-image: linear-gradient(160deg, #84C2CA 20%,#09A5B9 60%);"
				}
				else if(i == 2){
					return "font-size: 2.5rem;text-align: center;background-image: linear-gradient(160deg, #09A5B9 20%,#3488C8 60%);"
				}
				else if(i == 3){
					return "font-size: 2.5rem;text-align: center;background-image: linear-gradient(160deg, #3488C8 20%,#ADD9F6 80%);"
				}
			}
		}
	}
</script>



<style scoped>
</style>
